"use strict";
import * as React from 'react';
import { commonProps, commonStyles } from "../../assets/styles/common";
import Colors from "../../assets/styles/Colors";
import NavBackButton from "../../component/BackButton";
import NavRightButton from "../../component/RightButton";
import MyText from "../../component/MyText";
import T from "../../utils/T";
import { SCREEN_WIDTH } from "../../constant";
const { View, TextInput, Keyboard, Animated } = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
const { connect } = require('react-redux');
class Page extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            bottom: new Animated.Value(0),
            count: 0
        };
        this._keyboardWillShow = (props) => {
            const { height } = props.endCoordinates;
            Animated.timing(this.state.bottom, {
                toValue: height,
                duration: 240,
            }).start();
        };
        this._keyboardWillHide = () => {
            Animated.timing(this.state.bottom, {
                toValue: 0,
                duration: 200,
            }).start();
        };
        this.onChange = ({ nativeEvent: { text } }) => {
            this.setState({ count: text ? text.length : 0 });
        };
        this.onFinish = () => {
            this.props.callBack(this.input._lastNativeText ? this.input._lastNativeText : '');
            Actions.pop();
        };
    }
    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
    }
    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }
    render() {
        return (<View style={[commonStyles.container]}>
                <NavigationBar {...commonProps.navBar} title={{ title: '说明', tintColor: Colors.White }} rightButton={<NavRightButton onPress={this.onFinish}>
                                   <MyText color={Colors.Active} fontSize={14}>{T('Done')}</MyText>
                               </NavRightButton>} leftButton={<NavBackButton />}/>
                <TextInput style={[commonStyles.flex1,
            {
                fontSize: 16,
                color: Colors.Title, padding: 5
            }]} ref={ref => this.input = ref} multiline defaultValue={this.props.value} onChange={this.onChange} maxLength={2000} numberOfLines={0}/>
                <Animated.View style={[
            commonStyles.flexRow,
            commonStyles.absolute,
            {
                left: 0,
                bottom: this.state.bottom,
                justifyContent: 'flex-end',
                width: SCREEN_WIDTH,
                padding: 5,
            }
        ]}>
                    <MyText color={Colors.SubTitle} fontSize={18} fontWeight={'500'}>{`${this.state.count}/2000`}</MyText>
                </Animated.View>
            </View>);
    }
}
Page.defaultProps = {
    callBack: () => {
    },
    value: ''
};
export default Page;
